import React, { useState } from "react";
import "./App.css";
import lodash from "lodash";

// 定义App组件
const App = () => {
  const changeCode = (x, y, step) => {
    const newList = lodash.cloneDeep(list);
    newList[x][y].code += step;
    setList(newList);
  };
  // 定义一个二维数组，每个元素都是一个数组，数组中的元素是字符串或null
  const [list, setList] = useState(
    [
      ["少万一", "一会风", "旺仔起", "帮张", null],
      ["刘寒冰", "帐篷换", "学委", "引进爱心", "找稀薄"],
      ["李敏敏", "章子怡", "往前", "陈金行", "李亚博"],
      ["徐婷瑞", "孙帮超", "陈智院", "王猛找", "赵康"],
    ].map((v) => {
      // 遍历二维数组，如果元素不是null，则将其转换为对象，对象包含name和code属性
      return v.map((v) => {
        if (!v) return null;
        return { name: v, code: 1 };
      });
    })
  );

  // 获取抽奖数组
  function getValue() {
    const arr = getArr();
    // console.log("抽奖数组", arr)
    // return Math.floor(Math.random() * list.length);
    const index = Math.floor(Math.random() * arr.length);
    // console.log('index:', index)
    return arr[index];
  }

  // 获取抽奖数组
  const getArr = () => {
    const result = [];
    list.forEach((v) => {
      v.forEach((v) => {
        if (v) {
          // 根据code属性，将name属性添加到result数组中code次
          new Array(v.code).fill().forEach(() => {
            result.push(v.name);
          });
        }
      });
    });
    return result;
  };

  // 根据name属性，找到其在list数组中的位置
  const findIndex = (value) => {
    for (let x = 0; x < list.length; x++) {
      const item = list[x];
      for (let y = 0; y < item.length; y++) {
        if ((item[y] && item[y].name) === value) {
          return { x, y };
        }
      }
    }
    return {};
  };
  // 切换活动状态
  const switchActive = () => {
    const value = getValue();
    console.log(value);
    const { x, y } = findIndex(value);
    setActive({ x, y });
  };
  // 开始抽奖
  const start = () => {
    switchActive();
    const timer = setInterval(() => {
      switchActive();
    }, 100);

    setTimeout(() => {
      clearInterval(timer);
    }, 3000);
  };
  // 定义活动状态
  const [active, setActive] = useState({ x: -1, y: -1 });
  return (
    <div>
      <ul className="one">
        {list.map((v, x) => {
          return (
            <li key={x}>
              <ul className="two">
                {v.map((v, y) => {
                  return (
                    <li
                      key={y}
                      style={{
                        backgroundColor:
                          active.x === x && active.y === y ? "red" : "white",
                      }}
                    >
                      {v && `${v.name}-${v.code}`}
                      <span> {v && v.name}</span>
                      <p>概率{ v && v.code}</p>
                      <button
                        style={{ padding: "6px 20px" }}
                        onClick={() => changeCode(x, y, +1)}
                      >
                        +
                      </button>
                      <button
                        style={{ padding: "6px 20px" }}
                        onClick={() => changeCode(x, y, -1)}
                      >
                        -
                      </button>
                    </li>
                  );
                })}
              </ul>
            </li>
          );
        })}
      </ul>
      <button style={{ padding: 20 }} onClick={() => start()}>
        开始
      </button>
    </div>
  );
};

export default App;
